{% extends 'base.html' %}
{% load mytags %}
{% block self_head_css_js %}
    <script>
    $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    </script>
    <script src="/static/js/jquery.shiftcheckbox.js" type= "text/javascript" ></script>
    <script src="/static/js/xperf.js?_v=0.1.0"></script>
    <script>

        $(function(){
            $(document).ready (function() {
                $('.shiftCheckbox').shiftcheckbox();
            });
            $("#check_all_endpoints").bind("click", fn_check_all_hosts);
            $("#check_all_counters").bind("click", fn_check_all_items);
            $("#endpoint-search").keydown(function(event){
                if(event.keyCode == 13){
                    fn_list_endpoints();
                    event.preventDefault();
                    return false;
                }
            });
            $("#counter-search").keydown(function(event){
                if(event.keyCode == 13){
                    fn_list_counters();
                    event.preventDefault();
                    return false;
                }
            });
            $("#counter-filter").keydown(function(event){
                if(event.keyCode == 13){
                    filter_counter();
                    event.preventDefault();
                    return false;
                }
            });
            $("#tag-search").tokenfield();

            $("#service-search").select2({
                minimumInputLength: 3
            });

        })

    </script>
{% endblock %}
{% block content %}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        {% block main_section%}
        <div class="col-md-4">
        <div class="row">
            <div class="col-md-12" id="endpoints">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            搜索Endpoints
                        </div>

                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <label>Endpoint</label>
                                    <input id="endpoint-search" name="endpoint_search" type="text" class="form-control input-sm">
                                    <p class="help-block"><span class="text-warning">可以用空格分割多个搜索关键字</span></p>
                                </div>
                                <div class="form-group">
                                    <label>标签( eg: job=appstore-web)</label>
                                    <input id="tag-search" name="tag_search" type="text" class="form-control input-sm">
                                </div>
                            </form>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <button type="button" id="btn-search-endpoints" class="btn btn-default btn-sm btn-success" onclick="fn_list_endpoints();return false;">全局搜索</button>
                                    <select class="form-control input-sm" id="endpoint-limit" onchange="fn_list_endpoints();return false;">
                                        <option value="50"> Limit 50</option>
                                        <option value="100">Limit 100</option>
                                        <option value="500">Limit 500</option>
                                        <option value="5000">Limit 5000</option>
                                        <option value="10000">Limit 10000</option>
                                    </select>
                                </div>
                            </form>
                            <hr/>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <input id="endpoint-filter" type="text" class="form-control input-sm">
                                    <button class="btn btn-default btn-sm btn-info" onclick="filter_endpoint();return false;">快速过滤</button>
                                </div>
                            </form>

                        </div>

                        <table class="table table-striped">
                            <thead>
                                <tr><p class="help-block"><span class="text-warning">支持shift多选</span></p>
                                    <th width="30px" colspan=2><input type="checkbox" id="check_all_endpoints"></th>
                                    <th><button class="btn btn-link btn-xs pull-right" onclick="fn_list_counters();return false;">刷新counter列表</button></th>
                                </tr>
                            </thead>
                            <tbody id="tbody-endpoints"> </tbody>
                        </table>

                    </div>
                </div>

            </div>
        </div>
        {%endblock%}
        {% block right_section%}
        <div class="col-md-8">
        <div class="row">
                <div class="col-md-12" id="counters">

                    <div class="panel panel-info">
                        <div class="panel-heading">
                            搜索Counters
                        </div>

                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <label>Counter</label>
                                    <input id="counter-search" type="text" class="form-control input-sm">
                                    <p class="help-block"><span class="text-warning">可以用空格分割多个搜索关键字</span></p>
                                </div>
                            </form>

                            <form class="form-inline" role="form">
                                <button class="btn btn-default btn-sm btn-success" onclick="fn_list_counters();return false;">搜索</button>
                                <div class="form-group">
                                    <select class="form-control input-sm" id="counter-limit" onchange="fn_list_counters();return false;">
                                        <option value="50"> Limit 50</option>
                                        <option value="100">Limit 100</option>
                                        <option value="500">Limit 500</option>
                                        <option value="5000">Limit 5000</option>
                                        <option value="10000">Limit 10000</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input id="counter-filter" type="text" class="form-control input-sm">
                                    <button class="btn btn-default btn-sm btn-info" onclick="filter_counter();return false;">快速过滤</button>
                                </div>

                                <div class="dropdown form-group pull-right">
                                    <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#"> 看图 <span class="caret"></span></a>
                                    <ul class="dropdown-menu" role="menu">
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('h');return false;">Endpoint视角</a></li>
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('k');return false;">Counter视角</a></li>
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('a');return false;">组合视角</a></li>
                                    </ul>
                                </div>

                            </form>

                        </div>

                        <table class="table table-striped">
                            <thead> <tr>
                                <th width="30px"><input type="checkbox" id="check_all_counters"></th>
                                <th >Counters</th>
                                <th width="60px">类型</th>
                                <th width="60px">频率</th>
                            </tr></thead>

                            <tbody id="tbody-counters"> </tbody>
                        </table>
                    </div>

                </div>
        </div>
    </div>
        {% endblock %}

    </div>
</div>
{% endblock %}